<template>
	<view class="invitation">
		<!-- 顶部导航 -->
		<diyNavBar value='邀请分享' :fixed="true" :color="'rgba(255,255,255,0)'"></diyNavBar>
		<z-swiper v-model="imgs" :options="options"  @slideChange="onChange">
			<z-swiper-item :custom-style="{width:'600rpx',height:'80vh'}" v-for="(item,index) in imgs"
				:key="index">
				<image style="width:600rpx;border-radius: 20rpx;" :src="$util.img(item.image_url,'invitation')" mode="widthFix" ></image>
			</z-swiper-item>
		</z-swiper>
		<view class="box">
			<view class="input"  @click="$util.copy(code)">
				{{code}}
			</view>
			<button type="default" class="btn" @click="btn" v-if="uatype">立即邀请</button>
			<button type="default" class="btn" @click="gotos('preservation')" v-else>保存图片</button>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup-box">
				<view class="top">
					<view class="item" v-for="(item,index) in popup"
					 :key="index" @click="gotos(item.type)">
						<text class="iconfont" :class="item.icon"></text>
						<text>{{item.title}}</text>
					</view>
				</view>
				<view class="close" @click="close">取消</view>
			</view>
		</uni-popup>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	import loadingCover from '../../component/loading-cover/loading-cover.vue'
	export default{
		components:{diyNavBar,loadingCover},
		data(){
			return {
				code:'',//邀请码
				imgs:[],//海报图片
				popup:[{//弹窗参数
					title:'保存海报',
					icon:'icon-xiazai',
					type:'preservation'
				},{
					title:'微信好友',
					icon:'icon-weixin',
					type:'share'
				}],
				index:0,//当前第几张图片
				options: {//swier参数配置
					effect: 'coverflow',
					centeredSlides: true,
					slidesPerView: 'auto',
					coverflowEffect: {
						rotate: 0,
						stretch: -40,
						depth: 200,
						modifier: 1,
						slideShadows: true,
					},
				},
				uatype:false
			}
		},
		onShow(){
			let img = this.$util.img('/qrcode/distribution/system_4e2km2zi2.png','invitation')
			console.log(img)
			this.$http.sendrequest('/member/getInvite_code',{},{
				sendrequest:true
			}).then(res=>{
				if(res.code == 1) this.code = res.data;
			})
			this.$http.sendrequest('/member/createSystemPoster',{},{
				sendrequest:true
			}).then(res=>{
				if(res.code == 1){
					this.imgs = res.data;
					this.$forceUpdate();
				} 
				this.$refs.loadingCover.hide();
			})
			
			let ua = uni.getSystemInfoSync().platform;
			if (/android/i.test(ua)) this.uatype = true 
		},
		methods:{
			onChange(swiper,index){
				this.index= index;
			},
			btn(){
				this.$refs.popup.open()
			},
			close(){
				this.$refs.popup.close()
			},
			gotos(type){
				let src = this.$util.img(this.imgs[this.index].image_url,'invitation');
				switch(type){
					case 'preservation':
						this.$util.getImglocal(src)
						break;
					case 'share':
						this.$util.share(src)
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.invitation{
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,.8);
		padding-top: 156rpx;
		box-sizing: border-box;
		overflow: hidden;
		.swiper{
			width: 100%;
			height: 100vh;
			display: flex;
			align-items: center;
			.item{
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				image{
					width: 600rpx !important;
					border-radius: 20rpx;
				}
			}
		}
		.box{
			width: 100%;
			position: fixed;
			padding: 0 60rpx;
			box-sizing: border-box;
			bottom: 8rpx;
			left: 0;
			display: flex;
			align-items: center;
			flex-direction: column;
			z-index: 99;
			.input{
				width: 100%;
				background: #FFFFFF;
				height: 100rpx;
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 34rpx;
				color: red;
			}
			.btn{
				width: 100%;
				background: #FF2C26;
				height: 100rpx;
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;
				color: #FFFFFF;
				font-weight: bold;
			}
		}
		.popup-box{
			height: 360rpx;
			background: #FFFFFF;
			border-radius: 24px 24px 0px 0px;
			padding: 86rpx 152rpx 0;
			box-sizing: border-box;
			.top{
				display: flex;
				justify-content: space-between;
				.item{
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 28rpx;
					.iconfont{
						margin-bottom: 20rpx;
					}
					.icon-xiazai{
						font-size: 108rpx;
						color: #165DFF;
					}
					.icon-weixin{
						font-size: 96rpx;
						color: #34C758;
					}
				}
			}
			.close{
				text-align: center;
				margin-top: 40rpx;
				font-size: 34rpx;
			}
			
		}
	}
</style>